<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <title>K12试听课预约平台</title>
    <link rel="stylesheet" href="../lib/fontawesome/all.min.css">
    <link rel="stylesheet" href="../lib/layer/theme/default/layer.css">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/service.css">
</head>
<body>

<div id = app>
    <!-- 页头 -->
    <div class="page-header">
        <div class="header-top">
            <a href="index.html">
                <span>&lt;</span>
                <span>课程详情</span>
            </a>
        </div>
    </div>

    <!-- 页面主体 -->
    <div class="main-body">
        <div class="service-header">
            <div class="image">
                <img :src="shop.image">
                <div class="desc">
                    <p class="title" v-text="shop.title"></p>
                    <p v-text="shop.summery"></p>
                </div>
            </div>
            <div class="order-info">
                <div class="action">
                    <label>截止时间: </label>
                    <span class="time" v-text="shop.stoptime"></span>
                    <button type="button" @click="addOrder(shop.id)">立即预约</button>
                </div>

                <div class="info">
                    <div class="item">
                        <i class="fas fa-tag"></i>
                        <span>先到先得</span>
                    </div>
                    <div class="item">
                        <i class="fas fa-tag"></i>
                        <span>逾期自动取消</span>
                    </div>
                    <div class="item">
                        <span>已售</span>
                        <span v-text="shop.sell"></span>
                        <span>份</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="service-block">
            <div class="title">
                <div class="item">
                    <i class="fas fa-map-marker-alt"></i>
                    <span>店铺地址：</span>
                    <span v-text="shop.address"></span>
                </div>
                <div class="item">
                    <i class="layui-icon-cellphone-fine">&#xe63b;</i>
                    <span>联系电话：</span>
                    <span v-text="shop.phone"></span>
                </div>
            </div>
            <div class="title">
                <span>服务详情</span>
            </div>
            <div class="content" v-text="shop.shopdetail">

            </div>
        </div>

    </div>
    <!-- 页脚 -->
    <div class="page-foot">
        <div class="hr"></div>
        <span class="info">&copy;2019 软赢科技 版权所有</span>
    </div>

</div>

</body>
<script src="../lib/jquery.min.js"></script>
<script src="../lib/vue.min.js"></script>
<script src="../lib/axios.min.js"></script>
<script src="../lib/layer/layer.js"></script>
<script src="../js/main.js"></script>
<script src="../js/service.js"></script>

</html>